React Ref கால்பேக்குகளை மாஸ்டரிங் செய்தல்: செயல்திறன் மேம்பாட்டிற்கான இறுதி வழிகாட்டி

நவீன வலை மேம்பாட்டு உலகில், செயல்திறன் ஒரு அம்சம் மட்டுமல்ல; அது ஒரு அவசியம். React ஐப் பயன்படுத்தும் டெவலப்பர்களுக்கு, வேகமான, பதிலளிக்கக்கூடிய பயனர் இடைமுகங்களை உருவாக்குவது முதன்மையான குறிக்கோளாகும். React இன் மெய்நிகர் DOM மற்றும் மறுசீரமைப்பு அல்காரிதம் பெரும்பாலான கடினமான பணிகளைக் கையாளும் அதே வேளையில், உச்ச செயல்திறனைத் திறக்க ஆழமான புரிதல் முக்கியமான சில வடிவங்கள் மற்றும் APIகள் உள்ளன. அத்தகைய ஒரு பகுதி ரெஃப்களின் மேலாண்மை, குறிப்பாக, பெரும்பாலும் தவறாகப் புரிந்துகொள்ளப்படும் கால்பேக் ரெஃப்களின் நடத்தை.

ரெஃப்கள் DOM நோட்களை அல்லது ரெண்டர் முறையில் உருவாக்கப்பட்ட React கூறுகளை அணுக ஒரு வழியை வழங்குகின்றன—இது கவனம் செலுத்துதல், அனிமேஷன்களைத் தூண்டுதல் அல்லது மூன்றாம் தரப்பு DOM லைப்ரரிகளுடன் ஒருங்கிணைத்தல் போன்ற பணிகளுக்கு அத்தியாவசியமான ஒரு வழி. செயல்பாட்டு கூறுகளில் எளிய சந்தர்ப்பங்களில் useRef தரநிலையாக மாறியிருந்தாலும், ஒரு குறிப்பு எப்போது அமைக்கப்படுகிறது மற்றும் அமைக்கப்படவில்லை என்பதன் மீது கால்பேக் ரெஃப்கள் மிகவும் சக்திவாய்ந்த, துல்லியமான கட்டுப்பாட்டை வழங்குகின்றன. இருப்பினும், இந்த சக்தி ஒரு நுட்பமான விஷயத்துடன் வருகிறது: ஒரு கூறு அதன் வாழ்க்கைச் சுழற்சியின் போது ஒரு கால்பேக் ரெஃப் பல முறை தூண்டப்படலாம், சரியாகக் கையாளப்படாவிட்டால் செயல்திறன் சிக்கல்களுக்கும் பிழைகளுக்கும் வழிவகுக்கும்.

இந்த விரிவான வழிகாட்டி React ref கால்பேக்கை தெளிவுபடுத்துகிறது. நாம் ஆராயப்போவது:

• கால்பேக் ரெஃப்கள் என்றால் என்ன, மற்ற ரெஃப் வகைகளிலிருந்து அவை எவ்வாறு வேறுபடுகின்றன.
• கால்பேக் ரெஃப்கள் இருமுறை அழைக்கப்படுவதற்கான முக்கிய காரணம் (ஒருமுறை null உடன், ஒருமுறை உறுப்புடன்).
• ரெஃப் கால்பேக்குகளுக்கு இன்லைன் செயல்பாடுகளைப் பயன்படுத்துவதன் செயல்திறன் குறைபாடுகள்.
• useCallback ஹூக்கைப் பயன்படுத்தி மேம்படுத்துவதற்கான உறுதியான தீர்வு.
• சார்புகளைக் கையாளுவதற்கும், வெளிப்புற நூலகங்களுடன் ஒருங்கிணைப்பதற்கும் மேம்பட்ட வடிவங்கள்.

இந்தக் கட்டுரையின் முடிவில், உங்கள் React பயன்பாடுகள் உறுதியானது மட்டுமல்லாமல், அதிக செயல்திறன் கொண்டவை என்பதை உறுதிப்படுத்திக்கொண்டு, கால்பேக் ரெஃப்களை நம்பிக்கையுடன் பயன்படுத்த உங்களுக்கு அறிவு கிடைக்கும்.

ஒரு விரைவான சுருக்கம்: கால்பேக் ரெஃப்கள் என்றால் என்ன?

மேம்படுத்துதலுக்குள் நுழையும் முன், கால்பேக் ரெஃப் என்றால் என்ன என்பதை சுருக்கமாகப் பார்ப்போம். useRef() அல்லது React.createRef() மூலம் உருவாக்கப்பட்ட ஒரு ரெஃப் பொருளைக் கடத்துவதற்குப் பதிலாக, நீங்கள் ஒரு செயல்பாட்டை ref பண்புக்கு அனுப்புகிறீர்கள். கூறு ஏற்றப்படும் போதும் (mounts) அகற்றப்படும் போதும் (unmounts) React ஆல் இந்த செயல்பாடு செயல்படுத்தப்படுகிறது.

கூறு ஏற்றப்படும் போது (mounts) DOM உறுப்புடன் ரெஃப் கால்பேக்கை React அழைக்கும், மேலும் கூறு அகற்றப்படும் போது (unmounts) null உடன் அதை அழைக்கும். குறிப்பு கிடைக்கும் அல்லது அழிக்கப்படவிருக்கும் சரியான தருணங்களில் இது உங்களுக்கு துல்லியமான கட்டுப்பாட்டை அளிக்கிறது.

செயல்பாட்டு கூறு ஒன்றில் ஒரு எளிய எடுத்துக்காட்டு இங்கே:

            import React, { useState } from 'react';

function TextInputWithFocusButton() {
  let textInput = null;

  const setTextInputRef = element => {
    console.log('Ref callback fired with:', element);
    textInput = element;
  };

  const focusTextInput = () => {
    // Focus the text input using the raw DOM API
    if (textInput) textInput.focus();
  };

  return (
    <div>
      <input type="text" ref={setTextInputRef} />
      <button onClick={focusTextInput}>
        Focus the text input
      </button>
    </div>
  );
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், setTextInputRef என்பது நமது கால்பேக் ரெஃப் ஆகும். இது ரெண்டர் செய்யப்படும் போது <input> உறுப்புடன் அழைக்கப்படும், இது அதைச் சேமித்து பின்னர் focus() ஐ அழைக்கப் பயன்படுத்த அனுமதிக்கிறது.

முக்கியப் பிரச்சனை: ரெஃப் கால்பேக்குகள் ஏன் இருமுறை தூண்டப்படுகின்றன?

டெவலப்பர்களை பெரும்பாலும் குழப்பமடையச் செய்யும் மைய நடத்தை, கால்பேக்கின் இருமுறை அழைப்பு ஆகும். ஒரு கால்பேக் ரெஃப் கொண்ட ஒரு கூறு ரெண்டர் செய்யப்படும் போது, கால்பேக் செயல்பாடு பொதுவாக அடுத்தடுத்து இருமுறை அழைக்கப்படுகிறது:

1. முதல் அழைப்பு: ஆர்கியூமென்ட்டாக null உடன்.
2. இரண்டாவது அழைப்பு: DOM உறுப்பு நிகழ்வுடன் ஆர்கியூமென்ட்டாக.

இது ஒரு பிழை அல்ல; இது React குழுவின் வேண்டுமென்றே செய்யப்பட்ட வடிவமைப்புத் தேர்வு. null உடன் அழைப்பு, முந்தைய ரெஃப் (ஏதேனும் இருந்தால்) பிரிக்கப்படுகிறது என்பதைக் குறிக்கிறது. இது சுத்தம் செய்யும் செயல்பாடுகளைச் செய்ய உங்களுக்கு ஒரு முக்கியமான வாய்ப்பை வழங்குகிறது. எடுத்துக்காட்டாக, நீங்கள் முந்தைய ரெண்டரில் நோடுடன் ஒரு நிகழ்வு கேட்பவரை (event listener) இணைத்திருந்தால், புதிய நோடு இணைக்கப்படுவதற்கு முன்பு அதை அகற்றுவதற்கான சரியான தருணம் null அழைப்பாகும்.

இருப்பினும், பிரச்சனை இந்த ஏற்றுதல்/அகற்றுதல் சுழற்சி அல்ல. கூறுவின் நிலை, ரெஃப் உடன் முற்றிலும் தொடர்பில்லாத ஒரு வழியில் புதுப்பிக்கப்படும் போதும் கூட, இந்த இருமுறை தூண்டுதல் ஒவ்வொரு மறு-ரெண்டரிலும் நிகழும்போது உண்மையான செயல்திறன் சிக்கல் எழுகிறது.

இன்லைன் செயல்பாடுகளின் குறைபாடு

மறு-ரெண்டர் செய்யப்படும் ஒரு செயல்பாட்டு கூறுக்குள் இந்த அப்பாவித் தோற்றமளிக்கும் செயலாக்கத்தைக் கவனியுங்கள்:

            import React, { useState } from 'react';

function FrequentUpdatesComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h3>Counter: {count}</h3>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <div
        ref={(node) => {
          // This is an inline function!
          console.log('Ref callback fired with:', node);
        }}
      >
        I am the referenced element.
      </div>
    </div>
  );
}

            

              
                Copy
              
            
          

இந்தக் குறியீட்டை இயக்கி "Increment" பொத்தானைக் கிளிக் செய்தால், ஒவ்வொரு கிளிக்கிலும் உங்கள் கன்சோலில் பின்வருவனவற்றைக் காண்பீர்கள்:

            Ref callback fired with: null
Ref callback fired with: <div>...</div>

            

              
                Copy
              
            
          

இது ஏன் நிகழ்கிறது? ஏனெனில் ஒவ்வொரு ரெண்டரிலும், நீங்கள் ref பண்புக்கூறுக்காக ஒரு புதிய செயல்பாட்டு நிகழ்வை உருவாக்குகிறீர்கள்: (node) => { ... }. அதன் மறுசீரமைப்பு செயல்முறையின் போது, React முந்தைய ரெண்டரின் பண்புக்கூறுகளை தற்போதையவற்றுடன் ஒப்பிடுகிறது. ref பண்புக்கூறு மாறியுள்ளதை அது காண்கிறது (பழைய செயல்பாட்டு நிகழ்விலிருந்து புதியதற்கு). React இன் ஒப்பந்தம் தெளிவானது: ரெஃப் கால்பேக் மாறினால், அது முதலில் பழைய ரெஃபை null உடன் அழைப்பதன் மூலம் அழிக்க வேண்டும், பின்னர் DOM நோடுடன் அழைப்பதன் மூலம் புதியதை அமைக்க வேண்டும். இது ஒவ்வொரு ரெண்டரிலும் தேவையற்ற சுத்தம்/அமைப்பு சுழற்சியைத் தூண்டுகிறது.

ஒரு எளிய console.log இற்கு, இது ஒரு சிறிய செயல்திறன் பாதிப்பு. ஆனால் உங்கள் கால்பேக் விலையுயர்ந்த ஒன்றைச் செய்தால் கற்பனை செய்து பாருங்கள்:

• சிக்கலான நிகழ்வு கேட்பவர்களை இணைத்தல் மற்றும் அகற்றுதல் (எ.கா., `scroll`, `resize`).
• ஒரு கனமான மூன்றாம் தரப்பு நூலகத்தை துவக்குதல் (ஒரு D3.js விளக்கப்படம் அல்லது ஒரு மேப்பிங் நூலகம் போன்றவை).
• தளவமைப்பு மறு-ஓட்டங்களை (layout reflows) ஏற்படுத்தும் DOM அளவீடுகளைச் செய்தல்.

ஒவ்வொரு நிலை புதுப்பித்தலிலும் இந்த தர்க்கத்தைச் செயல்படுத்துவது உங்கள் பயன்பாட்டின் செயல்திறனை கடுமையாகக் குறைத்து, நுட்பமான, கண்டறிய கடினமான பிழைகளை அறிமுகப்படுத்தலாம்.

தீர்வு: `useCallback` உடன் மெமோயிங் செய்தல்

இந்த பிரச்சனைக்கு தீர்வு, React, மறு-ரெண்டர்களில் ரெஃப் கால்பேக்கிற்கான சரியாக அதே செயல்பாட்டு நிகழ்வைப் பெறுவதை உறுதி செய்வதாகும், அதை நாம் வெளிப்படையாக மாற்ற விரும்பாதவரை. இது useCallback ஹூக்கிற்கான சரியான பயன்பாட்டு சந்தர்ப்பமாகும்.

useCallback ஒரு கால்பேக் செயல்பாட்டின் மெமோயஸ் செய்யப்பட்ட (memoized) பதிப்பை வழங்குகிறது. இந்த மெமோயஸ் செய்யப்பட்ட பதிப்பு அதன் சார்பு வரிசையில் (dependency array) உள்ள சார்புகளில் ஒன்று மாறினால் மட்டுமே மாறும். ஒரு வெற்று சார்பு வரிசையை ([]) வழங்குவதன் மூலம், கூறுவின் முழு வாழ்க்கைச் சுழற்சிக்குமான நிலையான செயல்பாட்டை நாம் உருவாக்க முடியும்.

useCallback ஐப் பயன்படுத்தி நமது முந்தைய எடுத்துக்காட்டை மறுசீரமைப்போம்:

            import React, { useState, useCallback } from 'react';

function OptimizedComponent() {
  const [count, setCount] = useState(0);

  // Create a stable callback function with useCallback
  const myRefCallback = useCallback(node => {
    // This logic now runs only when the component mounts and unmounts
    console.log('Ref callback fired with:', node);
    if (node !== null) {
      // You can perform setup logic here
      console.log('Element is mounted!');
    }
  }, []); // <-- Empty dependency array means the function is created only once

  return (
    <div>
      <h3>Counter: {count}</h3>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <div ref={myRefCallback}>
        I am the referenced element.
      </div>
    </div>
  );
}

            

              
                Copy
              
            
          

இப்போது, நீங்கள் இந்த மேம்படுத்தப்பட்ட பதிப்பை இயக்கும் போது, நீங்கள் கன்சோல் பதிவை மொத்தமாக இருமுறை மட்டுமே காண்பீர்கள்:

1. கூறு ஆரம்பத்தில் ஏற்றப்படும் போது ஒருமுறை (Ref callback fired with: <div>...</div>).
2. கூறு அகற்றப்படும் போது ஒருமுறை (Ref callback fired with: null).

"Increment" பொத்தானைக் கிளிக் செய்வது ரெஃப் கால்பேக்கை இனி தூண்டாது. ஒவ்வொரு மறு-ரெண்டரிலும் தேவையற்ற சுத்தம்/அமைப்பு சுழற்சியை நாங்கள் வெற்றிகரமாக தடுத்துள்ளோம். தொடர்ச்சியான ரெண்டர்களில் ref பண்புக்கூறுக்காக React அதே செயல்பாட்டு நிகழ்வைக் காண்கிறது மற்றும் எந்த மாற்றமும் தேவையில்லை என்பதை சரியாக தீர்மானிக்கிறது.

மேம்பட்ட சூழ்நிலைகள் மற்றும் சிறந்த நடைமுறைகள்

ஒரு வெற்று சார்பு வரிசை சாதாரணமாக இருந்தாலும், உங்கள் ரெஃப் கால்பேக் பண்புக்கூறுகள் அல்லது நிலையில் ஏற்படும் மாற்றங்களுக்கு எதிர்வினையாற்ற வேண்டிய சூழ்நிலைகள் உள்ளன. இங்கிருந்துதான் useCallback இன் சார்பு வரிசையின் சக்தி உண்மையாக பிரகாசிக்கிறது.

உங்கள் கால்பேக்கில் சார்புகளைக் கையாளுதல்

உங்கள் ரெஃப் கால்பேக்கிற்குள் ஒரு நிலை அல்லது ஒரு பண்புக்கூறைச் சார்ந்து சில தர்க்கத்தை நீங்கள் இயக்க வேண்டும் என்று கற்பனை செய்து பாருங்கள். எடுத்துக்காட்டாக, தற்போதைய கருப்பொருளின் அடிப்படையில் ஒரு `data-` பண்புக்கூறை அமைப்பது.

            function ThemedComponent({ theme }) {
  const [internalState, setInternalState] = useState(0);

  const themedRefCallback = useCallback(node => {
    if (node !== null) {
      // This callback now depends on the 'theme' prop
      console.log(`Setting theme attribute to: ${theme}`);
      node.setAttribute('data-theme', theme);
    }
  }, [theme]); // <-- Add 'theme' to the dependency array

  return (
    <div>
      <p>Current Theme: {theme}</p>
      <div ref={themedRefCallback}>This element's theme will update.</div>
      {/* ... imagine a button here to change the parent's theme ... */}
    </div>
  );
}

            

              
                Copy
              
            
          

இந்த எடுத்துக்காட்டில், useCallback இன் சார்பு வரிசையில் theme ஐ சேர்த்துள்ளோம். இதன் பொருள்:

• ஒரு புதிய themedRefCallback செயல்பாடு theme பண்புக்கூறு மாறும் போது மட்டுமே உருவாக்கப்படும்.
• theme பண்புக்கூறு மாறும் போது, React புதிய செயல்பாட்டு நிகழ்வைக் கண்டறிந்து ரெஃப் கால்பேக்கை மீண்டும் இயக்குகிறது (முதலில் null உடன், பின்னர் உறுப்புடன்).
• இது நமது விளைவை—`data-theme` பண்புக்கூறை அமைப்பது—புதுப்பிக்கப்பட்ட theme மதிப்புடன் மீண்டும் இயக்க அனுமதிக்கிறது.

இது சரியான மற்றும் நோக்கம் கொண்ட நடத்தை. அதன் சார்புகள் மாறும் போது ரெஃப் தர்க்கத்தை மீண்டும் தூண்டுமாறு React இற்கு வெளிப்படையாக கூறுகிறோம், அதே நேரத்தில் அது தொடர்பில்லாத நிலை புதுப்பித்தல்களில் இயங்குவதைத் தடுக்கிறோம்.

மூன்றாம் தரப்பு நூலகங்களுடன் ஒருங்கிணைத்தல்

கால்பேக் ரெஃப்களுக்கான மிகவும் சக்திவாய்ந்த பயன்பாட்டு சந்தர்ப்பங்களில் ஒன்று, DOM நோடுடன் இணைக்கப்பட வேண்டிய மூன்றாம் தரப்பு நூலகங்களின் நிகழ்வுகளை துவக்குவதும் அழிப்பதும் ஆகும். இந்த வடிவம் கால்பேக்கின் ஏற்றுதல்/அகற்றுதல் தன்மையை மிகச் சரியாகப் பயன்படுத்துகிறது.

ஒரு விளக்கப்படம் அல்லது வரைபட நூலகம் போன்ற ஒரு நூலகத்தை நிர்வகிப்பதற்கான ஒரு வலுவான வடிவம் இங்கே:

            import React, { useRef, useCallback, useEffect } from 'react';
import SomeChartingLibrary from 'some-charting-library';

function ChartComponent({ data }) {
  // Use a ref to hold the library instance, not the DOM node
  const chartInstance = useRef(null);

  const chartContainerRef = useCallback(node => {
    // The node is null when the component unmounts
    if (node === null) {
      if (chartInstance.current) {
        console.log('Cleaning up chart instance...');
        chartInstance.current.destroy(); // Cleanup method from the library
        chartInstance.current = null;
      }
      return;
    }

    // The node exists, so we can initialize our chart
    console.log('Initializing chart instance...');
    const chart = new SomeChartingLibrary(node, {
      // Configuration options
      data: data,
    });
    chartInstance.current = chart;

  }, [data]); // Re-create the chart if the data prop changes

  return <div className="chart-container" ref={chartContainerRef} style={{ height: '400px' }} />;
}

            

              
                Copy
              
            
          

இந்த வடிவம் விதிவிலக்காக சுத்தமானது மற்றும் மீள்திறன் கொண்டது:

1. துவக்கம்: `div` ஏற்றப்படும் போது, கால்பேக் `node` ஐப் பெறுகிறது. இது விளக்கப்பட நூலகத்தின் ஒரு புதிய நிகழ்வை உருவாக்கி, அதை `chartInstance.current` இல் சேமிக்கிறது.
2. சுத்தம் செய்தல்: கூறு அகற்றப்படும் போது (அல்லது `data` மாறினால், மீண்டும் இயக்குவதை தூக்கும் போது), கால்பேக் முதலில் `null` உடன் அழைக்கப்படுகிறது. ஒரு விளக்கப்பட நிகழ்வு உள்ளதா என்பதை குறியீடு சரிபார்க்கிறது, மற்றும் இருந்தால், அதன் `destroy()` முறையை அழைக்கிறது, நினைவக கசிவுகளைத் தடுக்கிறது.
3. புதுப்பிப்புகள்: `data` ஐ சார்பு வரிசையில் சேர்ப்பதன் மூலம், விளக்கப்படத்தின் தரவு அடிப்படையில் மாற்றப்பட வேண்டும் என்றால், முழு விளக்கப்படமும் சுத்தமாக அழிக்கப்பட்டு, புதிய தரவுகளுடன் மீண்டும் துவக்கப்படுவதை உறுதிசெய்கிறோம். எளிய தரவு புதுப்பிப்புகளுக்கு, ஒரு நூலகம் ஒரு `update()` முறையை வழங்கலாம், இதை ஒரு தனி `useEffect` இல் கையாளலாம்.

செயல்திறன் ஒப்பீடு: மேம்படுத்தல் எப்போது *உண்மையாகவே* முக்கியம்?

செயல்திறனை ஒரு நடைமுறை மனநிலையுடன் அணுகுவது முக்கியம். ஒவ்வொரு ரெஃப் கால்பேக்கையும் `useCallback` இல் சுழற்றுவது ஒரு நல்ல பழக்கமாக இருந்தாலும், கால்பேக்கிற்குள் செய்யப்படும் வேலையைப் பொறுத்து உண்மையான செயல்திறன் தாக்கம் வியத்தகு முறையில் மாறுபடும்.

கவனிக்க முடியாத தாக்கம் கொண்ட சூழ்நிலைகள்

உங்கள் கால்பேக் ஒரு எளிய மாறி ஒதுக்கீட்டை (variable assignment) மட்டுமே செய்தால், ஒவ்வொரு ரெண்டரிலும் ஒரு புதிய செயல்பாட்டை உருவாக்கும் செலவு மிகச் சிறியது. நவீன JavaScript என்ஜின்கள் செயல்பாடு உருவாக்கம் மற்றும் குப்பைகளை சேகரிப்பதில் நம்பமுடியாத அளவுக்கு வேகமானவை.

எடுத்துக்காட்டு: ref={(node) => (myRef.current = node)}

இது போன்ற சந்தர்ப்பங்களில், தொழில்நுட்ப ரீதியாக குறைவான உகந்ததாக இருந்தாலும், ஒரு உண்மையான உலக பயன்பாட்டில் செயல்திறன் வேறுபாட்டை நீங்கள் ஒருபோதும் அளக்க வாய்ப்பில்லை. முன்கூட்டிய மேம்படுத்தல் வலையில் விழ வேண்டாம்.

முக்கியமான தாக்கம் கொண்ட சூழ்நிலைகள்

உங்கள் ரெஃப் கால்பேக் பின்வருவனவற்றுள் எதையும் செய்தால், நீங்கள் எப்போதும் useCallback ஐப் பயன்படுத்த வேண்டும்:

• DOM கையாளுதல்: நேரடியாக வகுப்புகளைச் சேர்ப்பது அல்லது அகற்றுவது, பண்புக்கூறுகளை அமைப்பது அல்லது உறுப்பு அளவுகளை அளவிடுவது (இது தளவமைப்பு மறு-ஓட்டத்தை தூண்டலாம்).
• நிகழ்வு கேட்பவர்கள்: `addEventListener` மற்றும் `removeEventListener` ஐ அழைப்பது. ஒவ்வொரு ரெண்டரிலும் இதைத் தூண்டுவது பிழைகள் மற்றும் செயல்திறன் சிக்கல்களை அறிமுகப்படுத்த ஒரு உறுதியான வழியாகும்.
• நூலக துவக்கம்: நமது விளக்கப்பட எடுத்துக்காட்டில் காட்டப்பட்டுள்ளபடி, சிக்கலான பொருட்களை துவக்குவதும் அகற்றுவதும் விலை உயர்ந்தது.
• பிணைய கோரிக்கைகள்: ஒரு DOM உறுப்பின் இருப்பின் அடிப்படையில் ஒரு API அழைப்பை மேற்கொள்வது.
• மெமோயஸ் செய்யப்பட்ட குழந்தைகளுக்கு ரெஃப்களை கடத்துதல்: நீங்கள் ஒரு ரெஃப் கால்பேக்கை React.memo இல் சுழற்றப்பட்ட ஒரு குழந்தை கூறுக்கு ஒரு பண்புக்கூறாகக் கொடுத்தால், ஒரு நிலையற்ற இன்லைன் செயல்பாடு மெமோயசேஷனை உடைத்து, குழந்தை தேவையில்லாமல் மீண்டும் ரெண்டர் செய்ய வழிவகுக்கும்.

ஒரு நல்ல பொது விதி: உங்கள் ரெஃப் கால்பேக் ஒரு ஒற்றை, எளிய ஒதுக்கீட்டை விட அதிகமாக இருந்தால், அதை useCallback உடன் மெமோய்ஸ் செய்யவும்.

முடிவுரை: கணிக்கக்கூடிய மற்றும் செயல்திறன் மிக்க குறியீட்டை எழுதுதல்

React இன் ரெஃப் கால்பேக் DOM நோட்கள் மற்றும் கூறு நிகழ்வுகள் மீது துல்லியமான கட்டுப்பாட்டை வழங்கும் ஒரு சக்திவாய்ந்த கருவியாகும். அதன் வாழ்க்கைச் சுழற்சியைப் புரிந்துகொள்வது—குறிப்பாக சுத்தம் செய்யும் போது வேண்டுமென்றே செய்யப்படும் `null` அழைப்பு—அதை திறம்பட பயன்படுத்துவதற்கான திறவுகோலாகும்.

ref பண்புக்கூறுக்கு ஒரு இன்லைன் செயல்பாட்டைப் பயன்படுத்துவது தேவையற்ற மற்றும் சாத்தியமான விலை உயர்ந்த மறு-செயல்பாடுகளுக்கு ஒவ்வொரு ரெண்டரிலும் வழிவகுக்கிறது என்பதை நாம் கற்றுக்கொண்டோம். தீர்வு நேர்த்தியானது மற்றும் இயல்பான React: useCallback ஹூக்கைப் பயன்படுத்தி கால்பேக் செயல்பாட்டை நிலைப்படுத்துவது.

இந்த வடிவத்தை மாஸ்டரிங் செய்வதன் மூலம், நீங்கள்:

• செயல்திறன் சிக்கல்களைத் தடுத்தல்: ஒவ்வொரு நிலை மாற்றத்திலும் விலையுயர்ந்த அமைப்பு மற்றும் அகற்றும் தர்க்கத்தைத் தவிர்க்கவும்.
• பிழைகளை நீக்குதல்: நிகழ்வு கேட்பவர்கள் மற்றும் நூலக நிகழ்வுகள் நகல்கள் அல்லது நினைவக கசிவுகள் இல்லாமல் சுத்தமாக நிர்வகிக்கப்படுவதை உறுதி செய்யவும்.
• கணிக்கக்கூடிய குறியீட்டை எழுதுதல்: கூறு ஏற்றப்படும் போது, அகற்றப்படும் போது, அல்லது அதன் குறிப்பிட்ட சார்புகள் மாறும் போது மட்டுமே இயங்கும் வகையில், ரெஃப் தர்க்கம் சரியாக செயல்படும் கூறுகளை உருவாக்கவும்.

அடுத்த முறை ஒரு சிக்கலான சிக்கலைத் தீர்க்க ஒரு ரெஃப்க்கு நீங்கள் செல்லும் போது, ஒரு மெமோயஸ் செய்யப்பட்ட கால்பேக்கின் சக்தியை நினைவில் கொள்ளுங்கள். இது உங்கள் குறியீட்டில் ஒரு சிறிய மாற்றம், இது உங்கள் React பயன்பாடுகளின் தரம் மற்றும் செயல்திறனில் ஒரு குறிப்பிடத்தக்க வித்தியாசத்தை ஏற்படுத்தும், உலகெங்கிலும் உள்ள பயனர்களுக்கு சிறந்த அனுபவத்திற்கு பங்களிக்கும்.